import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class StaffSearch extends Component {    
    handlerSearch(){
        let bar = ReactDOM.findDOMNode(this.refs.searchBar);
        let value = bar.value;
        this.props.searchStaff(value);
    }

    //筛选
	handlerIdChange(){
	    let sel = ReactDOM.findDOMNode(this.refs.selId);
		let selValue = sel.options[sel.selectedIndex].value;
		this.props.filtStaff(selValue);
	}    
    
    render () {
        return (
            <div>
              <h3>人员管理系统</h3>
              <table className="searchtab">
                <tbody>
                  <tr>
                    <td className="headerTd">
                    <label>搜索：</label>  
                    <input type='text' ref="searchBar" onChange={this.handlerSearch.bind(this)} className="intxt" placeholder='请输入搜索关键字...' /></td>
                    <td className="headerTd">
                        <label for='idSelect'>人员筛选：</label>
                        <select id='idSelect' className="intxt" ref="selId" onChange={this.handlerIdChange.bind(this)}>
                            <option value='0'>全部</option>
                            <option value='1'>主任</option>
                            <option value='2'>老师</option>
                            <option value='3'>学生</option>
                            <option value='4'>实习</option>
                        </select>
                    </td>
                    <td>
                        <label for='orderSelect'>排列方式：</label>
                        <select id='orderSelect' className="intxt">
                            <option value='0'>身份</option>
                            <option value='1'>年龄升</option>
                            <option value='2'>年龄降</option>
                        </select>
                    </td>
                  </tr>
                </tbody>
              </table>
          </div>
        );
    }
}

export default StaffSearch;